<template>
    <div>
      <v-layout class="px-3 pb-2">
      <v-flex xs2>
        <v-btn @click="addBrand" color="info">新增品牌</v-btn>
      </v-flex>
        <v-spacer/>
        <v-flex xs4>
          <v-text-field label="Search" hide-details=""  append-icon="search" v-model="key"></v-text-field>
        </v-flex>
      </v-layout>
      <v-data-table
        :headers="headers"
        :items="brands"
        :pagination.sync="pagination"
        :total-items="totalBrands"
        :loading="loading"
        class="elevation-1"
      >
        <template slot="items" slot-scope="props">
          <td class="text-xs-center">{{ props.item.id }}</td>
          <td class="text-xs-center">{{ props.item.name }}</td>
          <td class="text-xs-center"><img :src="props.item.image" alt=""/></td>
          <td class="text-xs-center">{{ props.item.letter }}</td>
          <td class="text-xs-center">
               <v-btn flat icon color="info">
                 <v-icon>edit</v-icon>
               </v-btn>
            <v-btn flat icon color="error">
                 <v-icon>delete</v-icon>
               </v-btn>
           </td>
        </template>
      </v-data-table>

      <!--弹出的对话框-->
      <v-dialog max-width="500" v-model="show" persistent>
        <v-card>
          <!--对话框的标题-->
          <v-toolbar dense dark color="primary">
            <v-toolbar-title>新增品牌</v-toolbar-title>
            <v-spacer/>
            <!--关闭窗口的按钮-->
            <v-btn icon @click="closeWindow"><v-icon>close</v-icon></v-btn>
          </v-toolbar>
          <!--对话框的内容，表单-->
          <v-card-text class="px-5">
            <brand-form :oldBrand="brand" :isEdit="isEdit" @close="show = false" :reload="getDataFromApi"/>
          </v-card-text>
        </v-card>
      </v-dialog>

    </div>
</template>

<script>
  // 导入自定义的表单组件
  import MyBrandForm from './MyBrandForm'
  import axios from 'axios'
    export default {
        name: "MyBrand",
      components:{
        MyBrandForm
      },
        data(){
          return{
            headers:[
              {text: "品牌ID", value: "id", align: "center", sortable: true},
              {text: "品牌名称", value: "name", align: "center", sortable: false},
              {text: "品牌LOGO", value: "image", align: "center", sortable: false},
              {text: "品牌首字母", value: "letter", align: "center", sortable: true},
              {text: "操作",  align: "center", sortable: false}
            ],
            show:false,
            brands:[],
            pagination:{},//分页对象
            totalBrands:0,
            loading: false,
            key:"",//搜索条件

          }
        },
      created(){
         this.loadBrands();
      },
      //监控数据变化发送请求
      watch:{
          key(){
            this.pagination.page=1;
            this.loadBrands();
          },
        pagination:{
            deep:true,
           handler(){
              this.loadBrands();
           }
        }
      },
      methods:{
        addBrand(){
          // 控制弹窗可见：
          this.show = true;
        },
        closeWindow(){
          // 关闭窗口
          this.show = false;
        },
          loadBrands(){
            this.loading=true;
            //发ajax请求道后台查询数据
            this.$http.get("/item/brand/page",{
              //发送参数到后台
              params:{
                //搜索条件
                key:this.key,                     //搜索条件
                page:this.pagination.page,        //页码
                rows:this.pagination.rowsPerPage, //每页记录数
                sortBy:this.pagination.sortBy,    //排序字段
                desc:this.pagination.descending   //排序方式
              }
              //响应数据
            }).then(resp=>{
               this.brands=resp.data.items;
               this.totalBrands=resp.data.total;
              this.loading=false;
            })
          }
      }
    }
</script>

<style scoped>

</style>
